<template>
  <div class="app-container bigView">
      <el-row>
            <el-col :span="2">
                <el-button icon="el-icon-setting" circle @click="maxWindow"></el-button>
            </el-col>
            <el-col :span="20" style="text-align: center; font-weight: 700; font-size: 30px; color: #2690ed;">
                智慧食堂数据看板
            </el-col>
            <el-col :span="2">
            </el-col>
      </el-row>
      <el-row>
          <el-col :span="8">
              <!--温度-->
              <div ref="temperatureDiv" style="height:300px"></div>
          </el-col>
          <el-col :span="8">
              <!--前5商品-->
              <div ref="spplierTop5Div" style="height:300px"></div>
          </el-col>
          <el-col :span="8">
              <!--湿度-->
              <div ref="humidityDiv" style="height:300px"></div>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
              <!--每个供应商商品的验收合格率-->
              <div ref="goodsCheckNumberDiv" style="height:500px"></div>
          </el-col>
          <el-col :span="12">
              <!--一周内验收合格和不合格商品数量-->
              <div ref="weekCheckPassDiv" style="height:500px"></div>
          </el-col>
      </el-row>
      
      

  </div>
</template>



<script>
  // import bargraph from '../../dashboard/AttendanceChart'
import * as echarts from 'echarts';
import {getOrderGoodsTop10,getWeekCheckPass,getSpplierCheckPass,getCityWeather } from '@/api/canteen/dashboard'

export default {
    name: "canteenDashboard",
    data(){
      return{
        isMax: true,
        //温度
        temperatureChart:undefined,
        //湿度
        humidityChart:undefined,
        //排名前5的商品
        spplierTop5Chart:undefined,
        //每个供应商商品验收数量
        goodsCheckNumberChart:undefined,
        //一周内验收合格和不合格商品数量
        weekCheckPassChart:undefined,
      }
    },
    components:{
      // bargraph
    },
    watch: {
        temperatureChartData: {
            deep: true,
            handler(val) {
                this.setTemperatureOption(val)
            }
        },
        humidityChartData: {
            deep: true,
            handler(val) {
                this.setHumidityOption(val)
            }
        },
        spplierTop5ChartData: {
            deep: true,
            handler(val) {
                this.setSpplierTop5Option(val)
            }
        },
        goodsCheckNumberChartData:{
            deep: true,
            handler(val) {
                this.setGoodsCheckNumberChartOption(val)
            }
        },
        weekCheckPassChartData:{
            deep: true,
            handler(val) {
                this.setWeekCheckPassChartOption(val)
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            let resp={
                data:{
                    humidity:"20%",
                    tem:25
                }
            }
            // getCityWeather().then(resp=>{
                this.initTemperatureChart(resp.data)
                this.initHumidityChart(resp.data)
            // })
            
            this.initSpplierTop5Chart()
            this.initGoodsCheckNumberChart()
            this.initweekCheckPassChart()
        })
    },
    created() {

    },
    methods: {
        initTemperatureChart(data) {
            //温度
            this.temperatureChart = echarts.init(this.$refs.temperatureDiv)
            this.setTemperatureOption(data)

        },
        initHumidityChart(data) {
            //湿度
            this.humidityChart = echarts.init(this.$refs.humidityDiv)
            this.setHumidityOption(data)
        },
        initSpplierTop5Chart(){
            //前5商品
            this.spplierTop5Chart = echarts.init(this.$refs.spplierTop5Div)
            getOrderGoodsTop10().then(resp=>{
                console.log(resp.data)
                this.setSpplierTop5Option(resp.data)
            })
            
        },
        initGoodsCheckNumberChart(){
            //每个供应商商品验收数量
            this.goodsCheckNumberChart = echarts.init(this.$refs.goodsCheckNumberDiv)
            getSpplierCheckPass({limit:10}).then(resp=>{
                this.setGoodsCheckNumberChartOption(resp.data)
            })
            
        },
        initweekCheckPassChart(){
            //一周商品验收数量
            this.weekCheckPassChart = echarts.init(this.$refs.weekCheckPassDiv)
            getWeekCheckPass().then(resp=>{
                this.setWeekCheckPassChartOption(resp.data)
            })
            
        },
        setWeekCheckPassChartOption(data){
            const colors = ['#5470C6', '#EE6666'];
            this.weekCheckPassChart.setOption({
                // title: {
                //     text: '一周商品验收情况'
                // },
                color: colors,
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                    type: 'cross'
                    }
                },
                legend: {},
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [
                    {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                        color: colors[1]
                        }
                    },
                    
                    // prettier-ignore
                    data: data.passDate
                    },
                    {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                        color: colors[0]
                        }
                    },
                    
                    // prettier-ignore
                    data: data.passDate
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: '验收通过',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.passList
                    },
                    {
                    name: '拒收/未收',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.noPassList
                    }
                ]
            })
        },
        setGoodsCheckNumberChartOption(data){
            this.goodsCheckNumberChart.setOption({
                // title: {
                //     text: '供应商品合格数量比例'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: data.spplierList
                },
                series: [
                    {
                    name: '已验收',
                    type: 'bar',
                    stack: 'total',
                    barWidth: '40%',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.passList
                    },
                    {
                    name: '未验收',
                    type: 'bar',
                    stack: 'total',
                    barWidth: '40%',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.noPassList
                    }
                ]
            })
        },
        setSpplierTop5Option(data){
            this.spplierTop5Chart.setOption({
                //   title: {
                //         text: '商品采购TOP10'
                //     },
                  xAxis: {
                        type: 'category',
                        data: data.goodsList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: data.goodsNumberList,
                        type: 'bar',
                        barWidth: '30%',
                        }
                    ]
            })
        },
        setTemperatureOption(data){
            console.log(this.temperatureChart)
            this.temperatureChart.setOption({
                series: [
                    {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#1682e6'
                    },
                    progress: {
                        show: true,
                        width: 30
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                        width: 20
                        }
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                        lineStyle: {
                        width: 2,
                        color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -52,
                        length: 14,
                        lineStyle: {
                        width: 3,
                        color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: -20,
                        color: '#999',
                        fontSize: 14
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 16,
                        fontWeight: 'bolder',
                        formatter: '气温:{value} °C',
                        color: 'auto'
                    },
                    data: [
                        {
                        value: data.tem
                        }
                    ]
                    },
                    {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    itemStyle: {
                        color: '#1682e6'
                    },
                    progress: {
                        show: true,
                        width: 8
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                        value: 20
                        }
                    ]
                    }
                ]
            })
        },
        setHumidityOption(data){
            console.log(data)
            this.humidityChart.setOption({
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                    name: 'Pressure',
                    type: 'gauge',
                    detail: {

                        fontSize: 16,
                        fontWeight: 'bolder',
                        formatter:'{value} %'
                    },
                    data: [
                        {
                        value: data.humidity.replace("%",''),
                        name: '湿度'
                        }
                    ]
                    }
                ]
            })
        },
        maxWindow(){

            if(this.$route.path=='/canteen/dashboard'){
                this.$router.replace({ path: '/cateenDashboard' })
            }else{
                this.$router.replace({ path: '/canteen/dashboard' })
            }
        }
        
    }
  }
</script>

<style>
.bigView{
    height: 100%;
    width: 100%;
    background-color: aliceblue;
}
</style>